<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<% String title = "信息综合系统"; %>
<%@ include file="/WEB-INF/jsp/header.jsp" %>
<title><%=title %>-注册库管理</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-itunes-app" content="app-id=429849944" />
<meta name="apple-touch-fullscreen" content="no" />
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="no" />
</head>

<body class="fixed-top" style="background: #fff;">
<div class="container-fluid">
	<div class="row-fluid">
	    <div class="span12">
	        <ul class="breadcrumb" style="padding-bottom : 12px;background: #fff;">
	            <li>
	            	<a href="${pageContext.request.contextPath}/user/index.do">
	                 	<i class="icon-angle-left"></i>
						<i class="icon-angle-left"></i> &nbsp;&nbsp;
	                 	首页控制台</a>
	                    <span class="divider">/</span>
	            </li>
                <li class="active">注册库管理</li>
                <li class="pull-right search-wrap">
	                <!-- <button onclick="toggleCondi();" 
						class="btn dropdown-toggle" data-toggle="dropdown">
						<span id="but_text">隐藏筛选区域</span> 
						<i id="toggleCondi_i" class="icon-angle-up"></i>
					</button>
		            &nbsp;&nbsp; -->
			        <div class="btn-group pull-right" >
		               <button class="btn dropdown-toggle" data-toggle="dropdown">更多 <i class="icon-angle-down"></i>
		               </button>
			           <ul class="dropdown-menu pull-right">
			               <li><a href="${pageContext.request.contextPath}/register/download.do">下载已筛选注册库记录</a></li>
			               <li><a href="#" onclick="openUpload('注册库');">Excel批量上传N条</a></li>
			               <li><a href="#" onclick="showOpen(0,'新增');">页面新增一条</a></li>
			               <li><a href="#" onclick="changeProp();">通过ID修改注册库属性</a></li>
			           </ul>
			      	</div>
	          </li>
        </ul>
    </div>
</div>
	
	<div class="row-fluid">
            <div class="span12" id="query_canvas-wrap">
               <div class="widget gray">
                   <div class="widget-title">
                       <h4><i class="icon-reorder"></i>
                     	  查询条件
                       </h4>
                       <span class="tools">
							<a href="javascript:;" onclick="up_down_active()" id="query_id" class="icon-chevron-down"></a>
					   </span>
                   </div>
                   <div class="widget-body" style="background: #FCFCFC;">
                   <div class="clearfix" >
			    	<form method="post" id="filterForm">
			         <input type="text" class="span2" id="registerId" name="id"
			          onMouseOver="this.title='请填写ID'"
			          ondblclick="clearText('registerId')"
			          placeholder="请填写ID" data-provide="typeahead" data-items="4" />
			
			         <input type="text" class="span2 typeahead" id="terminal" name="cname"
			          onMouseOver="this.title='请填写入货乙方'"
			          ondblclick="clearText('terminal')"
			          placeholder="请填写入货乙方" data-provide="typeahead" data-items="4"/>
			
			         <input type="text" class="span2 typeahead" id="terminalQs" name="zhengheqs"
			         	onMouseOver="this.title='请填写Qs名'"
			         	ondblclick="clearText('terminalQs')"
			         	placeholder="请填写Qs名" data-provide="typeahead" data-items="4"/>
			
		              <select id = "terminaltype" name="terminaltype" 
		              	size="1" class="input-medium m-wrap">
		                  <option value="">请选择渠道</option>
		                  <option value = "T1" >T1</option>
		                  <option value = "T2" >T2</option>
		                  <option value = "T3" >T3</option>
		                  <option value = "T4" >T4</option>
		              </select>
			
					 <select id = "province" name="shengfen"
						size="1" class="input-medium m-wrap">
			                   <option value="" >请选择省份</option>
			                   <c:forEach items="${condiMap.shengfen}" var="shenfen" varStatus="status">
			                 <option value = "${shenfen}" >${shenfen}</option>
			             </c:forEach>
			         </select>
			
			         <select id = "city" name="city" size="1" class="input-medium m-wrap">
			             <option value="" >请选择地市</option>
			             <c:forEach items="${condiMap.city}" var="city" varStatus="status">
			                 <option value = "${city}" >${city}</option>
			             </c:forEach>
			         </select>
			
			         <select id = "county" size="1" class="input-medium m-wrap noNull">
			             <option value="">请选择区县</option>
			             <c:forEach items="${condiMap.country}" var="country" varStatus="status">
			                 <option value = "${country}" >${country}</option>
			             </c:forEach>
			         </select>
			
			         <input  type="button" id="seach" name="seach" value="查询" class="btn  btn-primary"   style="margin-bottom: 10px;"
			                 onclick="query(pNumber, pSize);"/>
			         <input type="reset" id="reset" name="reset" value="重置该页面" class="btn  btn-primary"
						style="margin-bottom: 10px;" onclick="resetf();"/>
			        </form>
			     </div>
	    
                   </div>
              	 </div>
           	</div>
       	</div>
	<div class="widget">
	     
	    <!-- 文件上传 -->
	    <div id="uploadFileForm" hidden>
	        <div class="modal-body" >
	             <form action="${pageContext.request.contextPath}/register/upload.do"
					method="post" id="uploadForm" enctype="multipart/form-data">
						点击该按钮选择文件:<input type="file" name="excelFile" multiple="multiple"
							class="input-medium" id="file"><br/>
				</form>
	         </div>
	    </div>
	         
	    <!-- 通过ID修改属性-->
	    <div id="changePropDiv" hidden>
            <div class="modal-body" >
                <form id="changePropForm" action = "${pageContext.request.contextPath}/register/updateRegisterByIds.do">
	                <input name="id" id="idU" type="text" placeholder="请输入id" class="span5 noNull"/>
	                <select class="input-medium m-wrap" id ="flag" name="flag">
	                   <option value="ID密码" >ID密码</option>
	                   <option value="">无</option>
	                </select>
				</form>
           </div>
	    </div>
	        
	    <!-- 错误提示 -->
	   	<div id="errorInfoDiv" hidden="hidden">
			<table class="table table-striped table-hover table-bordered" style="font-size:11px;color:red;width:750px;margin:12px;">
				<thead>
					<tr>
						<td>出错行号</td>
						<td>出错标题</td>
						<td>标准字段</td>
						<td>错误字段</td>
					</tr>
				</thead>
				<tbody id="error-body"></tbody>
			</table>
		</div>
	            
	    <!-- 新增、更新 表单 -->
	    <div id="form_div" hidden>
	        <div class="modal-body" style="height: 90%">
	        <form method="post" id="submitForm">
	            <input id="registerIdU" value="" hidden = "hidden" name="id" />
	         	<span style="color:red;">*</span>&nbsp;
	               	请填写入货乙方:
	            <input type="text" class="span3 typeahead noNull" 
	                  name="cname" id="terminalU" data-provide="typeahead" data-items="4" />
				<span style="color:red;">*</span>&nbsp;请选择级别：
				<select id="terminallveU" size="1" class="input-medium m-wrap noNull" name="terminallve">
	                <c:forEach items="${condiMap.terminallve}" var="terminallve" varStatus="status">
	                    <option value = "${terminallve}" >${terminallve}</option>
	                </c:forEach>
	            </select>
	         	<br/>
	         	<span style="color:red;">*</span>&nbsp;
	               	请填写QS名：
				<input type="text" class="span3 typeahead noNull" 
					name="zhengheqs" id="qsnameU" data-provide="typeahead" data-items="4" />
	
				<span style="color:red;">*</span>&nbsp;请选择渠道：
				<select id = "terminaltypeU" name="terminaltype" size="1" class="input-medium m-wrap noNull">
                     <option value = "T1" >T1</option>
                     <option value = "T2" >T2</option>
                     <option value = "T3" >T3</option>
                     <option value = "T4" >T4</option>
                </select>
	
				<br/>请填写分部：
				<input type="text" class="span3 typeahead" name="addr" id="addrU" data-provide="typeahead" data-items="4" />
	
	              	<span style="color:red;">*</span>&nbsp;请选择地市：
	           	<select id = "cityU" size="1" class="input-medium m-wrap noNull" name="city">
	                <c:forEach items="${citys}" var="city" varStatus="status">
	                    <option value = "${city}" >${city}</option>
	                </c:forEach>
	                  </select>
				<br/>
				<span style="color:red;">*</span>&nbsp;请选择区县：
	            <select id = "countyU"   size="1" class="input-medium m-wrap noNull" name="country">
	                <c:forEach items="${countrys}" var="country" varStatus="status">
	                    <option value = "${country}" >${country}</option>
	                </c:forEach>
	                  </select>
				<span style="color:red;">*</span>&nbsp;请选择省份：
	            <select id = "provinceU"  size="1" class="input-medium m-wrap noNull" name="shengfen">
	                <c:forEach items="${provinces}" var="shenfen" varStatus="status">
	                    <option value = "${shenfen}" >${shenfen}</option>
	                </c:forEach>
	            </select>
	           	<br/> 请填写备注：
	            <textarea rows="3" cols="80" id="memoU" placeholder="请填写备注" name="memo"></textarea>
	       </form>
	     </div>
	  </div>
	    
	    
	    <!-- 查询list -->
	    <div class="row-fluid">
	    	<div class="span12">
	        <!-- BEGIN ALERTS PORTLET-->
	        <div class="widget blue">
	            <div class="widget-title">
	                <h4><i class="icon-reorder"></i>
	                	<a href="javascript:;" onclick="scrollToLeft();" title="定位到表格最左端" style ="color:white;">最左</a>
		                <a href="javascript:;" onclick="scrollToCenter();" title="定位到表格正中间" style ="color:white;">居中</a>
		                <a href="javascript:;" onclick="scrollToRight();" title="定位到表格最右端" style ="color:white;">最右</a>
		                <a href="javascript:;" id="getProp" title="复制选中行id" style ="color:white;margin-left:5px;">复制</a>
	                </h4>
                    <span class="tools">
						<a href="javascript:;" class="icon-chevron-down"></a>
					</span>
	            </div>
	 
	           <div class="widget-body" style="overflow:auto" id="canvas-wrap">
	            	<table class="table table-striped table-hover table-bordered" width="640px;"
	               		style="table-layout:fixed">
	                    <thead>
		                    <tr>
			                  <th style="width:15px;"><input type="checkbox" name="choiceAll" value="all" id ="allAndNotAll" onclick="allAndNotAll(this,'register');"/></th>
			                  <th width="50px">id</th> <th width="70px">经理</th>
			                  <th width="70px">大区</th><th width="70px">片区</th>
			                  <th width="60px">省份</th><th width="100px">地市</th>
			                  <th width="100px">区县</th><th width="328px">入货乙方</th>
			                  <th width="150px">QS名</th><th width="150px">录入日期</th>
			                  <th width="328px">备注</th>
			                  <th width="50px">渠道</th><th width="70px">等级</th>
			                  <th width="140px">分部</th>
			                  <th width="70px">录入人员</th><th width="70px">ID密码</th>
			               </tr>
	                    </thead>
	                    <tbody id="distribute-body">
	            		</tbody>
	                </table>
	                  <div class="pageBottom" style="text-align:center;">
		                 <input type="hidden" id="page-size" value="0"/>
		                 <div id="callBackPager" class="paging_bootstrap pagination">
		                 </div> 
		             </div>
	            </div>
	        </div>
	        <!-- END ALERTS PORTLET-->
	    	</div>
		</div>
	</div>
	<!-- END BASIC PORTLET-->
</div>

<!-- 页面模板基本js -->
<script src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.nicescroll.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/js/fullcalendar.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/Chart.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.scrollTo.min.js"></script>
<script src="${pageContext.request.contextPath }/js/common-scripts.js"></script>

<!--layer-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer/layer.js"></script>
<!--下拉多选过滤-->
<script type = "text/javascript" src = "${pageContext.request.contextPath}/js/bootstrap-multiselect.js" > </script>
<link rel = "stylesheet" href = "${pageContext.request.contextPath}/css/bootstrap-multiselect.css" type = "text/css" />
<!--自动补全-->
<script src="${pageContext.request.contextPath}/js/bootstrap-typeahead.js"></script>
<!--分页-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/extendPagination.js"></script>
<!--复制-->
<script src="${pageContext.request.contextPath}/js/jquery.zclip.min.js" type="text/javascript" ></script>

<!-- 自定义的script方法 -->
<script type="text/javascript">
	//初始化下拉多选过滤
    $(document).ready(function(){
    	setTimeout("selectMoreItem('terminaltype','请选择渠道','110px');",10);
    	setTimeout("selectMoreItem('city','请选择地市','110px');",10);
    	setTimeout("selectMoreItem('county','请选择区县','110px');",10);
    	setTimeout("selectMoreItem('province','请选择省份','110px');",10);
    });
	//初始化自动补全
    var terminalQs = ${condiMap.qsterminal};
    $('#terminalQs').typeahead({source: terminalQs});
    var terminal = ${condiMap.terminal};
    $('#terminal').typeahead({source: terminal});
</script>

<!--根据ID修改注册库属性 -->
<script type="text/javascript">
	var changePropHtml = $("#changePropDiv").html();
	var ret = null;
	//根据ID修改注册库属性
	function changeProp(){
		$("#changePropDiv").remove();
		layer.open({
            title: ['根据ID修改注册库属性', 'font-size:18px;'],
            type:1,
            content: changePropHtml, //这里content是一个普通的String,先获取出来，再移除，再把获取到的HTML放进来。
            btn: ['确认', '取消'],
            yes: function(index, layero){
                //非空验证
                var ret = checkNull('changePropForm');
                if(ret=="false"){
                    return true;
                }
                //一点击确认就关闭对话框
             	layer.closeAll();
                layer.load(2);
                var url = $("#changePropForm").attr("action");
        		sendRequest(url,$('#changePropForm').serialize(),function(result) {
        			var code = result.code;
        			var ret = result.msg;
        			if (code > 0) {
        				layer.msg(result.msg);
        				layer.closeAll('loading');
        			}
        		});
            }
            ,cancel: function(){
            	layer.closeAll('loading');
            }
            ,area: ['800px', '500px']
        });
	}
</script>
	
<!-- 新增、更新 -->
<script type="text/javascript">		
var htmls = $("#form_div").html();
var ret = null;
var open = false;
function showOpen(id,type) {
    $("#form_div").remove();
    layer.open({
     	title: [type+'<span style="color:red;font-size:12px;margin-left:10px;">*表示该项必填</span>', 'font-size:18px;'],
         type:1,
         content: htmls, //这里content是一个普通的String
         btn: ['确认', '取消'],
         yes: function(index, layero){
         	//非空验证 如果验证不通过不能关闭对话框
         	var ret = checkNull('submitForm');
         	if(ret=="false"){
         		return true;
         	}
         	//一点击确认就关闭对话框
         	layer.closeAll();
         	//加载等待框
         	layer.load(2);
         	var action ="";
             if("新增"==type){
             	action = "${pageContext.request.contextPath }/register/saveOrUpdate.do?flag=N";
             }else if("修改"==type){
             	action = "${pageContext.request.contextPath }/register/saveOrUpdate.do?flag=E";
             }
             var params = $("#submitForm").serialize();
			 sendRequest(action, params, function(result) {
				var code = result.code;
				if (code == -2) { //excel校验不通过
					open = true;
					errorInfo(result.msg);
				} else if (code == -1) { // 有错误
					layer.alert(result.msg);
				} else if (code > 0) {
					//查询方法里有关闭load(2)的方法
					query(pNumber, pSize);
					layer.alert(result.msg);
				}
			});
			return open;
         },cancel: function(){
         	layer.closeAll('loading');
         },area: ['800px', '500px']
     });
   
  	 //通过ID查询basis对象
     if("修改"==type){
     	var url = "${pageContext.request.contextPath }/register/selectByID.do";
		sendRequest(url,{"id" : id},function(result) {
			var code = result.code;
			var ret = result.msg;
			if (code > 0) {
				$("#registerIdU").val(ret.id);  //动态赋值
				$("#terminalU").val(ret.cname);
		       	$("#memoU").val(ret.memo);
		       	$("#qsnameU").val(ret.zhengheqs);
		        $("#addrU").val(ret.addr);
		        $("#departmentU").val(ret.department);
		        $("#terminallveU").val(ret.terminallve);
		        $("#cityU").val(ret.city);
		        $("#countyU").val(ret.country);
		        $("#provinceU").val(ret.shengfen);
		         	
		           //新增、更新界面的下拉多选过滤 
		        $('#provinceU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择省份',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        $('#cityU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择地市',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        $('#countyU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择区县',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        $('#terminaltypeU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择渠道',maxHeight: 300,buttonWidth: '125px'});
		        $('#terminallveU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择级别',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        changeReadOnly(type);
			}
		});
     } else {
     	//新增、更新界面的下拉多选过滤 
     	var url = "${pageContext.request.contextPath }/register/nothing.do";
		sendRequest(url,null,function(result) {
			var code = result.code;
			var ret = result.msg;
			if (code > 0) {
		        //新增、更新界面的下拉多选过滤 
		        $('#provinceU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择省份',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        $('#cityU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择地市',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        $('#countyU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择区县',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        $('#terminaltypeU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择渠道',maxHeight: 300,buttonWidth: '125px'});
		        $('#terminallveU').multiselect({includeSelectAllOption:true,nonSelectedText: '请选择级别',enableFiltering: true,maxHeight: 300,buttonWidth: '125px'});
		        changeReadOnly(type);
			}
		});
     }
  	 //自动补全 数据源填充
     var qsname = ${qsNamesStr};
     $('#qsnameU').typeahead({source: qsname});	
     var addrU = ${condiMap.fenbu};
     $('#addrU').typeahead({source: addrU});
}

//终端名只在新增时可以填写，修改时为只读，即不允许修改终端名
function changeReadOnly(type){
	if(type=='修改'){	//修改
		$("#terminalU").attr("readonly","readonly");
	}else{	//新增
		$("#terminalU").removeAttr("readonly");
	}
}
</script>
    
<!-- 查询list -->
<script type="text/javascript">   
    //异步请求获取符合筛选条件的流向记录
    function query(pageNumber, pageSize){
		var url = "${pageContext.request.contextPath }/register/selectForList.do?pageNumber="
				+ pageNumber + "&pageSize=" + pageSize;
    	var params = $("#filterForm").serialize();
    	queryList(url,params);
    }

    //动态创建table
    function createTable(currPage, limit, total, items) {
        var html = [], showNum = limit;
        if (total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
        for (var i = 0; i < showNum; i++) {
            html.push("<tr ondblclick=\"showOpen('"+items[i].id+"','修改')\" >");
            html.push('<td><input type="checkbox" name="choice" value="'+items[i].id+'"/></td>');
            html.push('<td>' + formatData(items[i].id) + '</td>');
            html.push('<td>' + formatData(items[i].mgr) + '</td>');
            html.push('<td>' + formatData(items[i].province) + '</td>');
            html.push('<td>' + formatData(items[i].space) + '</td>');
            html.push('<td>' + formatData(items[i].shengfen) + '</td>');
            html.push('<td>' + formatData(items[i].city) + '</td>');
            html.push('<td>' + formatData(items[i].country) + '</td>');
            html.push('<td>' + formatData(items[i].cname) + '</td>');
            html.push('<td>' + formatData(items[i].zhengheqs) + '</td>');
            html.push('<td>' + formatData(items[i].today) + '</td>');
            html.push('<td>' + formatData(items[i].memo) + '</td>');
            html.push('<td>' + formatData(items[i].terminaltype) + '</td>');
            html.push('<td>' + formatData(items[i].terminallve) + '</td>');
            html.push('<td>' + formatData(items[i].addr) + '</td>');
            html.push('<td>' + formatData(items[i].dataer) + '</td>');
            html.push('<td>' + formatData(items[i].flag) + '</td>');
            html.push('</tr>');
        }
        var mainObj = $('#distribute-body');
        mainObj.empty();
        mainObj.html(html.join(''));
    };
</script>
<script src="${pageContext.request.contextPath}/javascript/httpService.js"></script>
<!-- END BODY -->
</body>
</html>